<script lang="ts" setup>
import {
  TencentQq,
  Wechat,
  FeelgoodOne,
  GithubOne,
  NewLark,
} from "@icon-park/vue-next";
import { markRaw, ref } from "vue";

// 第三方登陆方式图标
const IconComponent: any = markRaw({
  sms: FeelgoodOne,
  qq: TencentQq,
  wechat: Wechat,
  newlark: NewLark,
  github: GithubOne,
});

const LOGINTYPELIST = ref([
  {
    key: "sms",
    title: "短信",
    onClick: () => {
      console.log("短信");
    },
  },
  {
    key: "qq",
    title: "QQ",
    onClick: () => {
      console.log("QQ");
    },
  },
  {
    key: "wechat",
    title: "微信",
    onClick: () => {
      console.log("微信");
    },
  },
  {
    key: "newlark",
    title: "飞书",
    onClick: () => {
      console.log("飞书");
    },
  },
  {
    key: "github",
    title: "Github",
    onClick: () => {
      console.log("Github");
    },
  },
]);
</script>

<template>
  <div class="third-login mt-4">
    <div class="w-full">
      <el-divider>
        <span class="text-gray-400">{{ $t("account.thirdpartyLogin") }}</span>
      </el-divider>
      <div
        class="el-row is-justify-center w-full lineheight-def"
        type="flex"
        data-v-b3a1f529=""
      >
        <a
          v-for="i in LOGINTYPELIST"
          :key="i.key"
          class="pswd btn track-btn"
          href="javascript:void(0);"
          :title="i.title"
          @click="i.onClick"
          data-v-b3a1f529=""
        >
          <component
            :is="IconComponent[i.key]"
            theme="outline"
            size="24"
            fill="#333"
          ></component>
        </a>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.btn {
  width: 38px;
  height: 38px;
  padding: 5px;
  background-color: #ffffff;
  border: 1px solid #d6d6d6;
  border-radius: 3px;
  box-sizing: border-box;
  vertical-align: middle;
  cursor: pointer;
  margin-left: 10px;
  margin-right: 10px;
  line-height: 26px;
}
</style>
